import { CloseOutlined } from '@ant-design/icons';
import { Drawer, Button, Divider, Row, Col, Tooltip, Space, Switch, ColorPicker } from 'antd';
import React from 'react';
import styles from "./index.module.scss";
import { debounce } from "lodash";
import { useDispatch } from 'react-redux';
import { toggleBreadcrumb, toggleBreadcrumbIcon, toggleFooter, toggleGray, toggleLayout, toggleMultiTab, togglePrimary, toggleShowLogo, toggleTopProgress, toggleWaterMark, toggleWeak } from '@/store/actions/settingActions';
import useStores from '@/hooks/useStores';

interface Props {
    open: boolean;
    onClose: () => void;
}

const layoutOptions = [
    {
        label: "左侧菜单",
        value: "left"
    },
    {
        label: "顶部菜单",
        value: "top"
    },
    {
        label: "混合菜单",
        value: "mix"
    }
]

const SettingDrawer: React.FC<Props> = ({ open, onClose }) => {
    const dispatch = useDispatch();
    const store = useStores();
    const {
        color_gray,
        color_primary,
        color_weak,
        layout,
        show_breadcrumb,
        show_breadcrumb_icon,
        show_footer,
        show_logo,
        show_multi_tab,
        show_top_progress,
        show_watermark
    } = store;

    // 改变菜单布局
    const changeLayout = (t: string) => {
        dispatch(toggleLayout(t))
        setLocalStorage("setting", { ...store, layout: t })
    }

    // 设置本地缓存
    const setLocalStorage = (key: string, value: any) => {
        localStorage.setItem(key, JSON.stringify(value));
    }

    // 改变body样式
    const changeBodyClass = (t: boolean, classname: string) => {
        t ? document.body.classList.add(classname) : document.body.classList.remove(classname)
    }

    return (
        <Drawer
            open={open}
            onClose={onClose}
            closeIcon={false}
            title={
                <div className={styles.mydrawerheader}>
                    系统设置
                    <CloseOutlined className='ant-drawer-close' onClick={onClose} />
                </div>
            }
            footer={
                <div className={styles.mydrawerfooter}>
                    <Button type='primary'>重置</Button>
                </div>
            }>
            <Divider>布局设置</Divider>
            <Row gutter={[16, 8]}>
                {
                    layoutOptions.map((item, index) => {
                        return (
                            <Col key={index} span={8}>
                                <Tooltip placement='bottom' title={item.label}>
                                    <div className={`${styles.example} ${layout == item.value ? styles.highBorder : ''}`}
                                        onClick={() => { changeLayout(item.value) }}>
                                        <div className={`${styles.exampleHeader} 
                                            ${item.value == 'top' || item.value == 'mix' ? styles.heightLigh : ''}
                                            ${styles.defauleBg}`}>
                                        </div>
                                        <div className={styles.exampleBody}>
                                            <div
                                                className={`${styles.exampleSider} 
                                                    ${styles.defauleBg} 
                                                    ${item.value == 'left' || item.value == 'mix' ? styles.heightLigh : ''}`}>
                                            </div>
                                            <div className={`${styles.exampleContent} ${styles.defauleBg}`}></div>
                                        </div>
                                    </div>
                                </Tooltip>
                            </Col>
                        )
                    })
                }
            </Row>
            <Divider>主题设置</Divider>
            <Space direction="vertical" size="middle" style={{ display: "flex", flexGrow: 1 }}>
                <div className={styles.inlineSetting}>
                    <span>色弱模式</span>
                    <Switch checked={color_weak} onChange={(checked) => {
                        dispatch(toggleWeak(checked))
                        changeBodyClass(checked, "color-weak")
                        setLocalStorage("setting", { ...store, color_weak: checked })
                    }}></Switch>
                </div>
                <div className={styles.inlineSetting}>
                    <span>黑白模式</span>
                    <Switch checked={color_gray} onChange={(checked) => {
                        dispatch(toggleGray(checked))
                        changeBodyClass(checked, "color-gray")
                        setLocalStorage("setting", { ...store, color_gray: checked })
                    }}></Switch>
                </div>
                <div className={styles.inlineSetting}>
                    <span>主题色</span>
                    <ColorPicker defaultValue={color_primary} showText onChange={debounce((_, hex: string) => {
                        dispatch(togglePrimary(hex))
                        setLocalStorage("setting", { ...store, color_primary: hex })
                    }, 500)} />
                </div>
            </Space>
            <Divider>页面展示</Divider>
            <Space direction="vertical" size="small" style={{ display: "flex", flexGrow: 1 }}>
                <div className={styles.inlineSetting}>
                    <span>显示LOGO</span>
                    <Switch checked={show_logo} onChange={(checked) => {
                        dispatch(toggleShowLogo(checked))
                        setLocalStorage("setting", { ...store, show_logo: checked })
                    }}></Switch>
                </div>
                <div className={styles.inlineSetting}>
                    <span>显示页脚</span>
                    <Switch checked={show_footer} onChange={(checked) => {
                        dispatch(toggleFooter(checked))
                        setLocalStorage("setting", { ...store, show_footer: checked })
                    }}></Switch>
                </div>
                <div className={styles.inlineSetting}>
                    <span>顶部进度</span>
                    <Switch checked={show_top_progress} onChange={(checked) => {
                        dispatch(toggleTopProgress(checked))
                        setLocalStorage("setting", { ...store, show_top_progress: checked })
                    }}></Switch>
                </div>
                <div className={styles.inlineSetting}>
                    <span>多页签显示</span>
                    <Switch checked={show_multi_tab} onChange={(checked) => {
                        dispatch(toggleMultiTab(checked))
                        setLocalStorage("setting", { ...store, show_multi_tab: checked })
                    }}></Switch>
                </div>
                <div className={styles.inlineSetting}>
                    <span>面包屑</span>
                    <Switch checked={show_breadcrumb} onChange={(checked) => {
                        dispatch(toggleBreadcrumb(checked))
                        setLocalStorage("setting", { ...store, show_breadcrumb: checked })
                    }}></Switch>
                </div>
                <div className={styles.inlineSetting}>
                    <span>面包屑图标</span>
                    <Switch checked={show_breadcrumb_icon} onChange={(checked) => {
                        dispatch(toggleBreadcrumbIcon(checked))
                        setLocalStorage("setting", { ...store, show_breadcrumb_icon: checked })
                    }}></Switch>
                </div>
                <div className={styles.inlineSetting}>
                    <span>水印</span>
                    <Switch checked={show_watermark} onChange={(checked) => {
                        dispatch(toggleWaterMark(checked))
                        setLocalStorage("setting", { ...store, show_watermark: checked })
                    }}></Switch>
                </div>
            </Space>
        </Drawer>
    )
}

export default SettingDrawer;